<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-21 10:50:22
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-16 16:35:21
 * @FilePath: \robot\src\views\patroling\PantiltControl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="text-white mb-7">云台控制</div>
    <div class="flex">
      <div class="grid gap-2 grid-cols-3 grid-rows-3 w-48 h-48 mr-4">
        <template v-for="item in rightButtonList" :key="item.value">
          <div
            v-if="item.value"
            tabindex="0"
            :class="[
              'bg-[#33434b]',
              'border',
              'border-solid',
              'border-[#627075]',
              'flex',
              'justify-center',
              'items-center',
              'cursor-pointer',
              'h-full',
              'active:bg-sky-700',
              'focus:bg-sky-500',
            ]"
            @click="onClick(item.value)"
          >
            <SvgIcon class="w-5 h-5" :name="item.icon"></SvgIcon>
          </div>
          <div v-else class="h-full" />
        </template>
      </div>
      <div class="flex-1 flex flex-col justify-around">
        <div class="flex text-white items-center">
          <span class="w-24">水平角度</span>
          <el-slider
            v-model="horizonAngle"
            class="flex-1"
            :step="1"
            :min="-180"
            :max="180"
            :show-input-controls="false"
            @change="handleChangeAngle(angleTypes.HORIZON)"
          />
        </div>
        <div class="flex text-white items-center">
          <span class="w-24">垂直角度</span>
          <el-slider
            v-model="verticalAngle"
            class="flex-1"
            :step="1"
            :min="-180"
            :max="180"
            :show-input-controls="false"
            @change="handleChangeAngle(angleTypes.VERTICAL)"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElNotification } from "element-plus";
import { computed, ref } from "vue";
import usePatrolingStore from "@/store/patroling";
import { storeToRefs } from "pinia";
import { patrolingCruise } from "@/api/remote-control.js";
import debounce from "lodash/debounce";

const horizonSpeed = ref(0);
const horizonAngle = ref(0);
const verticalSpeed = ref(0);
const verticalAngle = ref(0);

const angleTypes = {
  HORIZON: "horizon",
  VERTICAL: "vertical",
};

const rightButtonList = [
  {
    icon: "patroling-dir_up_lf",
    // value: "12",
    value: null,
  },
  {
    icon: "patroling-dir_up",
    value: "08",
  },
  {
    icon: "patroling-dir_up_rt",
    // value: "10",
    value: null,
  },
  {
    icon: "patroling-dir_c_lf",
    value: "04",
  },
  {
    icon: "patroling-full_switch",
    value: "255",
  },
  {
    icon: "patroling-dir_c_rt",
    value: "02",
  },
  {
    icon: "patroling-dir_d_lf",
    // value: "20",
    value: null,
  },
  {
    icon: "patroling-dir_down",
    value: "16",
  },
  {
    icon: "patroling-dir_d_rt",
    // value: "18",
    value: null,
  },
];

const { patrolingInfo } = storeToRefs(usePatrolingStore());
const caritem = computed(() => {
  return patrolingInfo.value.robotid;
});

/**
 * @description: 控制车辆
 * @param {*} id 点击的按钮
 * @return {*}
 */
async function onClick(value) {
  if (!caritem.value) {
    ElNotification({
      title: "提示",
      message: "请选择控制的车辆",
      type: "warning",
    });
    return;
  }
  const data = {
    code: caritem.value,
    param1: "02",
    param2: value,
    param3: horizonSpeed.value,
    param4: verticalSpeed.value,
  };
  await patrolingCruise(data);
}

const changeHorizonAngle = createDebouce("75", horizonAngle);

const changeVerticalAngle = createDebouce("77", verticalAngle);

function createDebouce(param2, ref) {
  return debounce(async () => {
    if (!caritem.value) {
      ElNotification({
        title: "提示",
        message: "请选择控制的车辆",
        type: "warning",
      });
      return;
    }
    const data = {
      code: caritem.value,
      param1: "01",
      param2: param2,
      param3: ref.value.toString(),
      param4: "ff",
    };
    await patrolingCruise(data);
  }, 500);
}

function handleChangeAngle(type) {
  if (type === angleTypes.HORIZON) {
    changeHorizonAngle();
  } else if (type === angleTypes.VERTICAL) {
    changeVerticalAngle();
  }
}
</script>
